<template>
<!-- 分页的单独封装 -->
  <div class="pagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";

const props = defineProps({
  layout: {
    type:String,
    define:"total, sizes, prev, pager, next, jumper"
  },
  small: {
    type:Boolean,
    define:false
  },
  pageSizes: {
    type:Array,
  },
  disabled :{
    type:Boolean,
    define:false
  },
  background:{
    type:Boolean,
    define:false
  },
  total:Number,
  allData:Array
});

const {background,disabled,small,pageSizes,layout,totle} = {...props}
const emit = defineEmits(["handleSizeChange","handleCurrentChange"])
const currentPage = ref(1)
const pageSize = ref(10)

const handleSizeChange = (val) => {
  //控制每页输出的数量
  console.log(`${val} items per page`);
  emit('handleSizeChange',val)
};
const handleCurrentChange = (val) => {
  // 调用接口 根据每页输出的数量和当前页码返回对应的数据
  console.log(`current page: ${val}`);
  emit('handleSizeChange',val)
};

</script>

<style lang="scss" scoped>
.pagination {
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
}
</style>